<!DOCTYPE html>
<html lang="en">
    <head>
        <title>fds</title>
        <!--	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
                <script src="../../jquery-1.7.2.js"></script>
                <script src="../../ui/jquery.ui.core.js"></script>
                <script src="../../ui/jquery.ui.widget.js"></script>
                <script src="../../ui/jquery.ui.position.js"></script>
                <script src="../../ui/jquery.ui.autocomplete.js"></script>
                <link rel="stylesheet" href="../demos.css">-->


<!--        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>-->
<!--<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">-->


        <link type="text/css" href="../js/jquery-ui-1.8.20.custom/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

        <style>
            #project-label {
                display: block;
                font-weight: bold;
                margin-bottom: 1em;
                font-size: 15px;
            }
            #project-icon {
                float: left;
                height: 32px;
                width: 32px;
            }
            #project-description {
                margin: 0;
                padding: 0;
            }
            #project{
                width: 270px;
                
            }
            
            .ui-autocomplete {
                max-height: 200px;
                overflow-y: auto;
                /* prevent horizontal scrollbar */
                overflow-x: hidden;
                width: 500px;
                /* add padding to account for vertical scrollbar */
                padding-right: 20px;
            }

         </style>
        <script>
            $(function() {

                $.ajax({
                    url: "../doctrine_system.php?getClientes",
                    cache: false,
                    async: false,                    
                    dataType : "text/html",
                    timeout: 40000,
                    success: function(html) {                        
                        if(!html) alert("ERROR: NO PUDO SER CARGADO EL AJAX");                        
                        html_template = html;                           
                    }
                });  
                var html = $.ajax({
                    type: "GET",
                    url: "../doctrine_system.php?getClientes",                    
                    async: false
                }).responseText;
                                
                //                console.log(html);
                var myObject = eval('(' + html + ')');                
                //                console.log(myObject);

                var clientes = myObject.clientes;
                
                //                var clientes = [
                //                    {
                //                        "user_id":"32",
                //                        "user_nombre":"peruanito",
                //                        "user_direccion":null,
                //                        "user_codigo_postal":"1406",
                //                        "user_ciudad":"Bs As",
                //                        "user_telefono":"452354",
                //                        "user_email":"sds@ds.com",
                //                        "user_fecha_alta":"0000-00-00 00:00:00",
                //                        "habilitado":"1",
                //                        "user_fecha_nacimiento":"0000-00-00",
                //                        "user_sexo":"M",
                //                        "comment":null,
                //                        "pic":"NA.jpg",
                //                        "eliminado":"1",
                //                        "user_celular":"5161465",
                //                        "user_estado":"2",
                //                        "user_apodo":null,
                //                        "user_pass":null,
                //                        "user_pass_rec":null,
                //                        "user_llmap":"-34.551519,-58.454994"
                //                    }
                //                ];

                function custom_source(request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response($.grep(clientes, function(value) {
                        return matcher.test(value.user_nombre)
                            || matcher.test(value.user_apodo)
                            || matcher.test(value.user_direccion)
                            || matcher.test(value.user_email)
                            || matcher.test(value.comment)
                            || matcher.test(value.user_celular)
                            || matcher.test(value.user_telefono);
                    }));
                }

                $( "#project" ).autocomplete({
                    minLength: 0,
                    source: custom_source, //projects o  "algo.php",
                    //                    search: "desc",
                    focus: function( event, ui ) {
                        var apodo = (ui.item.user_apodo)? ui.item.user_apodo:"";
                        
                        $( "#project" ).val( ui.item.user_nombre + " " + apodo );
                        return false;
                    },
                    select: function( event, ui ) {
                        var apodo = (ui.item.user_apodo)? ui.item.user_apodo:"";
                        var dir = (ui.item.user_direccion)? ui.item.user_direccion:"";
                        var tel = (ui.item.user_telefono)? ui.item.user_telefono:"";
                        var cel = (ui.item.user_celular)? ui.item.user_celular:""; 
                        
                        $( "#project" ).val( ui.item.user_nombre + " " + apodo );
                        $( "#project-id" ).val( ui.item.user_id );
                        $( "#project-description" ).html( dir + " " + tel + " " + cel );
                        //                        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {                    
                    //                    console.info(item);                    
                    var apodo = (item.user_apodo)? item.user_apodo:"";
                    
                    return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.user_nombre + " " + apodo + "<br>" + item.user_direccion + "</a>" )
                    .appendTo( ul );
                };
                
                //                console.info(auto);
            });
        </script>
    </head>
    <body>

        <div class="demo">
            <div id="project-label">Elegir Cliente:</div>
            <!--            <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>-->
            <input id="project" />
            <input type="hidden" id="project-id"/>
            <p id="project-description"></p>
        </div><!-- End demo -->



        <div class="demo-description">
            <p>Buscar Clientes</p>
        </div><!-- End demo-description -->

    </body>
</html>
